import { useSelector, useDispatch } from "react-redux";

function World() {
  const count = useSelector((state: any) => state.count);
  const todos = useSelector((state: any) => state.todos);

  const dispatch = useDispatch();

  return (
    <div>
      <h4>World</h4>
      <p>{count}</p>
      <button
        onClick={() =>
          dispatch({
            type: "todos/add",
            payload: {
              id: 2,
              title: "睡觉",
            },
          })
        }
      >
        添加
      </button>
      <hr />
      <ul>
        {todos.map((item: any) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default World;
